<template>
  <div class="myInformationBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      我的信息
      <div slot="right" class="headRight">
        <img src="../assets/img/icon_my.png" alt />
        <img src="../assets/img/share.png" alt @click="sharePop=true" />
      </div>
    </x-header>
    <!-- 个人信息 -->
    <div class="personal">
      <div class="leftBox">
        <img src="../assets/img/img_tx_1.png" alt class="userImg" />
        <div class="grade honorItem">{{user.grade}}</div>
        <div class="certify honorItem">证书：{{user.certificate}}个</div>
      </div>
      <div class="rightBox">
        <div class="title flex">
          <div class="name">{{user.userName}}</div>
          <img v-if="user.sex=='女'" src="../assets/img/icon_gril.png" alt />
          <img v-else src="../assets/img/icon_boy.png" alt />
          <div class="statusBox flex">
            <img src="../assets/img/approval.png" alt />
            {{user.status}}
          </div>
        </div>
        <div class="capacity clearfix">
          <div class="itemBox flex">
            <img src="../assets/img/icon_01.png" alt />
            <span>{{user.registerNum}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_02.png" alt />
            <span>{{user.registerTime}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_03.png" alt />
            <span>{{user.birthday}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_04.png" alt />
            <span>{{user.IDCard}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_05.png" alt />
            <span>{{user.phone}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_06.png" alt />
            <span>{{user.email}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_07.png" alt />
            <span>{{user.school}}</span>
          </div>
          <div class="itemBox flex">
            <img src="../assets/img/icon_08.png" alt />
            <span>{{user.major}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 私教简介 -->
    <div class="contentBox">
      <div class="headTop">私教简介</div>
      <div class="coachBox">{{user.intro}}</div>
    </div>
    <!-- 专业证书 -->
    <div class="contentBox">
      <div class="headTop">专业证书</div>
      <div v-for="(item,index) in user.certificateList" class="certificateBox">
        <div class="head flex">
          <div class="headTime">{{item.time}}</div>
          <div class="headTitle">{{item.title}}</div>
        </div>
        <div class="CcieBox">
          <img v-for="(item2,index2) in item.picture" :src="item2.img" alt />
        </div>
      </div>
    </div>
    <!-- 专业证书 -->
    <div class="contentBox">
      <div class="headTop">赛事成绩</div>
      <div v-for="(item,index) in user.gradeList" class="scoreBox">
        <group>
          <cell :title="item.title" value>
            <img slot="icon" width="20" class="titleImg" src="../assets/img/Competition01.png" />
          </cell>
          <cell-form-preview :list="item.infolist" class="cellForm"></cell-form-preview>
        </group>
      </div>
    </div>
    <!-- 其他 -->
    <div class="contentBox">
      <div class="headTop">其他</div>
      <div class="restsBox">
        <div v-for="(item,index) in user.restsList" class="restsList flex">
          <img :src="item.img" alt class="listImg" />
          <div class="rigthBox">
            <div class="listTitle">{{item.title}}</div>
            <div class="listContent">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分享弹框 -->
    <popup v-model="sharePop" class="popupBox">
      <ul class="shareTo clearfix">
        <li>
          <img src="../assets/img/wechat.png" alt />
          <div class="shareHint">微信</div>
        </li>
        <li>
          <img src="../assets/img/pyq.png" alt />
          <div class="shareHint">朋友圈</div>
        </li>
        <li>
          <img src="../assets/img/qq.png" alt />
          <div class="shareHint">QQ</div>
        </li>
        <li>
          <img src="../assets/img/kongjian.png" alt />
          <div class="shareHint">QQ空间</div>
        </li>
        <li>
          <img src="../assets/img/weibo.png" alt />
          <div class="shareHint">微博</div>
        </li>
      </ul>
      <div class="cancel" @click="sharePop=false">取消</div>
    </popup>
  </div>
</template>

<script>
import { XHeader, Popup, Group, Cell, CellFormPreview } from 'vux'
export default {
  components: {
    XHeader,
    Popup,
    Group,
    Cell,
    CellFormPreview
  },
  data() {
    return {
      sharePop: false,
      user: {
        id: '1',
        userName: '罗小飞',
        sex: '女',
        grade: '二级教练',
        certificate: '3',
        status: '审批中',
        img: require('../assets/img/img_tx_1.png'),
        registerNum: '2131464651321',
        registerTime: '2016-05-05',
        IDCard: '110111199002022121',
        birthday: '1990-02-02',
        phone: '13565498852',
        email: '31321135@163.com',
        school: '清华大学',
        major: '量子力学',
        intro: '私人教练，就是为健身爱好者提供一对一具体指导的健身指导者特点。私人教练适合不同健康水平、年龄段和经济收入的人群，通过提供个性化的健身计划和关注，服务于健身会员(顾客)。购买私人教练是最好的提高健康和体能、达到设置的目标的方法之一。',
        certificateList: [
          {
            id: '1',
            time: '2019-02-05',
            title: '国家健康营养师二级',
            picture: [
              {
                img: require('../assets/img/authenticationA.png')
              },
              {
                img: require('../assets/img/authenticationB.png')
              },
            ]
          },
          {
            id: '2',
            time: '2019-02-05',
            title: '国家运动教练二级',
            picture: [
              {
                img: require('../assets/img/authenticationA.png')
              },
              {
                img: require('../assets/img/authenticationB.png')
              },
            ]
          },
        ],
        gradeList: [
          {
            id: '1',
            time: '2019-02-05',
            title: '北京健美操大赛第一名',
            infolist: [
              {
                label: '比赛时间',
                value: '2019-05-06'
              },
              {
                label: '比赛成绩',
                value: '90'
              },
              {
                label: '比赛地点',
                value: '北京市 海淀区 知春路'
              }
            ],
          },
          {
            id: '2',
            time: '2019-02-05',
            title: '北京马拉松大赛第一名',
            infolist: [
              {
                label: '比赛时间',
                value: '2019-05-06'
              },
              {
                label: '比赛成绩',
                value: '90'
              },
              {
                label: '比赛地点',
                value: '北京市 海淀区 知春路'
              }
            ],
          },
          {
            id: '3',
            time: '2019-02-05',
            title: '国际跳高大赛第六名',
            infolist: [
              {
                label: '比赛时间',
                value: '2019-05-06'
              },
              {
                label: '比赛成绩',
                value: '90'
              },
              {
                label: '比赛地点',
                value: '北京市 海淀区 知春路'
              }
            ],
          },
        ],
        restsList: [
          {
            id: '1',
            img: require('../assets/img/img_qita.png'),
            title: '这是一个其他标题的例子',
            content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          },
          {
            id: '2',
            img: require('../assets/img/img_qita.png'),
            title: '这是一个其他标题的例子',
            content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
          },
        ]
      },
    }
  },
}
</script>

<style lang="less" scoped>
.myInformationBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    // position: fixed;
    // top:0;
    // left: 0;
    // right: 0;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
      .headRight {
        img {
          margin: 0 10px;
          width: 40px;
        }
      }
    }
  }
  // 个人信息
  .personal {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    border-bottom: 20px solid #f8f9fa;
    overflow: hidden;
    .leftBox {
      width: 120px;
        flex-shrink: 0;
      margin-right: 10px;
      .userImg {
        width: 120px;
        height: 120px;
      }
      .honorItem {
        padding: 2px 8px;
        font-size: 18px;
        margin-right: 10px;
        border-radius: 10px;
        margin: 10px 0;
        text-align: center;
        flex-shrink: 0;
      }
      .grade {
        background-color: #fae2ce;
        color: #f79146;
      }
      .certify {
        background-color: #cfe7fd;
        color: #53a7f5;
      }
    }
    .rightBox {
      flex-grow: 1;

      .title {
        margin-bottom: 20px;
        .name {
          font-size: 30px;
          font-weight: bold;
          margin-right: 20px;
        }
        img {
          width: 30px;
          height: 30px;
        }
        .statusBox {
          padding: 4px 8px;
          font-size: 20px;
          margin-left: auto;
          text-align: center;
          background-color: #f5a623;
          color: #fff;
          img {
            width: 30px;
            height: 26px;
            margin-right: 10px;
          }
        }
      }
      .capacity {
        .itemBox {
          float: left;
          width: 46%;
          margin-bottom: 10px;
          img {
            width: 30px;
            margin-right: 10px;
          }
          span {
            color: #178bec;
            font-size: 26px;
          }
        }
      }
    }
  }
  .contentBox {
    border-bottom: 20px solid #f8f9fa;
    .headTop {
      padding: 10px 20px;
      font-size: 30px;
      font-weight: bold;
      border-bottom: 2px solid #f2f2f2;
    }
    .coachBox {
      padding: 20px;
      color: #8b8b8b;
      font-size: 24px;
    }
    .certificateBox {
      overflow: hidden;
      padding: 0 20px;
      .head {
        padding: 10px 0;

        font-size: 28px;
        .headTime {
          color: #5ea6f8;
          margin-right: 20px;
        }
        .headTitle {
        }
      }
      .CcieBox {
        width: 100%;
        background-color: #ecf6ff;
        padding: 20px;
        box-sizing: border-box;
        img {
          width: 30%;
          margin-right: 20px;
        }
      }
    }
    .scoreBox {
      background-color: #ecf6ff;
      margin: 20px;
      .titleImg {
        width: 50px;
        margin-top: 10px;
        margin-right: 20px;
      }
      /deep/.weui-cells {
        margin-top: 0;
        background-color: transparent;
      }
      /deep/.weui-cells::before {
        content: none;
      }
      /deep/.weui-cells::after {
        content: none;
      }
      /deep/.weui-cell {
        border-bottom: 2px dashed #d9d9d9;
      }
      /deep/.weui-cell:before {
        content: none;
      }
      .cellForm {
        border-bottom: none;
        /deep/.weui-form-preview__value {
          color: #353535;
        }
      }
    }
    .restsBox {
      border-bottom: 20px solid #f8f9fa;
      .restsList {
      padding: 20px;

        .listImg {
          width: 200px;
          margin-right: 20px;
        }
        .rigthBox {
          height: 160px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .listTitle {
            font-weight: bold;
            font-size: 32px;
          }
          .listContent {
            color: #6c6c6c;
            font-size: 28px;
          }
        }
      }
    }
  }

  // 分享弹框
  .popupBox {
    .shareTo {
      list-style: none;
      padding-bottom: 80px;
      li {
        text-align: center;
        color: #5a5b5d;
        float: left;
        width: 30%;
        margin: 20px 0;
        margin-right: 4%;
        img {
          width: 60%;
        }
        .shareHint {
          font-size: 28px;
        }
      }
      li:nth-child(3n) {
        margin-right: 0;
      }
    }
    .cancel {
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      height: 80px;
      line-height: 80px;
      font-size: 28px;
    }
  }
}
</style>